<template>
	<view>
		<mh-navbar custom :back="true" title="我的订单" fixed center zIndex="1010" />
		<view class="container">
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="order-swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom" >
						<view v-for="(items, index) in orderList[0].datas" :key="index" class="order-container" v-if="orderList.length > 0">
							<view class="order-wrap">
								<view class="order-serialNumber">
									单号：{{items.serialNumber}}
								</view>
								<view v-for="(order, index) in items.goods" :key="index" class="order-good-list">
									<view class="order-good">
										<view class="order-good-img">
											<image :src="appUrl + order.img"></image>
										</view>
										<view class="order-good-info">
											<view class="order-good-name">{{order.name}}</view>
											<view class="order-good-num">x{{items.quantity}}</view>
										</view>
									</view>
								</view>
								<view class="order-operate">
									<view>
										<u-button shape="circle" @click="goLogistics(items.orderId)">查看物流</u-button>
									</view>
								</view>					
							</view>
						</view>
					</scroll-view>	
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view v-for="(items, index) in orderList[1].datas" :key="index" class="order-container" v-if="orderList.length > 0">
						<view class="order-wrap">
							<view class="order-serialNumber">
								单号：{{items.serialNumber}}
							</view>
							<view v-for="(order, index) in items.goods" :key="index" class="order-good-list">
								<view class="order-good">
									<view class="order-good-img">
										<image :src="appUrl + order.img"></image>
									</view>
									<view class="order-good-info">
										<view class="order-good-name">{{order.name}}</view>
										<view class="order-good-num">x{{items.quantity}}</view>
									</view>
								</view>
							</view>
							<view class="order-operate">
								<view>
									<u-button shape="circle" @click="goLogistics(items.orderId)">查看物流</u-button>
								</view>
							</view>					
						</view>
					</view>
					</scroll-view>	
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view v-for="(items, index) in orderList[2].datas" :key="index" class="order-container" v-if="orderList.length > 0">
							<view class="order-wrap">
								<view class="order-serialNumber">
									单号：{{items.serialNumber}}
								</view>
								<view v-for="(order, index) in items.goods" :key="index" class="order-good-list">
									<view class="order-good">
										<view class="order-good-img">
											<image :src="appUrl + order.img"></image>
										</view>
										<view class="order-good-info">
											<view class="order-good-name">{{order.name}}</view>
											<view class="order-good-num">x{{items.quantity}}</view>
										</view>
									</view>
								</view>
								<view class="order-operate">
									<view>
										<u-button shape="circle" @click="goLogistics(items.orderId)">查看物流</u-button>
									</view>
								</view>					
							</view>
						</view>
					</scroll-view>	
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				orderList: [
					{loadStatus:'loadmore',datas:[],currentPage:1}, 
					{loadStatus:'loadmore',datas:[],currentPage:1}, 
					{loadStatus:'loadmore',datas:[],currentPage:1}, 
				],
				appUrl:this.$store.state.vuex_config.appUrl,
			}
		},
		onLoad(e){
			if(this.$utils.isNotEmpty(e.current)){
				this.current = e.current;
			}
			this.getOrderList(0);
			this.getOrderList(1);
			this.getOrderList(2);
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.orderList[this.current].loadStatus='loading';
				setTimeout(() => {
					this.getOrderList(this.current);
				}, 1200);
			},
			getOrderList(idx){
				debugger
				var page = this.orderList[idx].currentPage;
				this.$u.api.orders({pageNum:page,pageSize:10,shipStatus:idx}).then(res => {
					debugger
					if (res.code == 200){
						this.orderList[idx].datas = res.data;
					}
				});
				this.orderList[idx].loadStatus='loadmore';
			},
			goLogistics(orderId){
				uni.navigateTo({
				    url: 'pages/mine/logistics?orderId='+orderId
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	min-height: 100%;
}
.container{
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
	.order-swiper{
		flex: 1;
	}
}
.order-container{
	width: 100%;
	padding: 10px;
	margin-top: 10px;
	.order-wrap{
		background: #FFFFFF;
		padding: 10px;
		.order-serialNumber{
			height: 30px;
			display: flex;
			align-items: center;
		}
		.order-good-list{
			margin-top: 10px;
			margin-bottom: 10px;
			.order-good{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.order-good-img{
					flex: 0 0 20%;
					image{
						width: 80px;
						height: 80px;
					}
				}
				.order-good-info{
					flex: 0 0 75%;
					flex-direction: column;
					display: flex;
					justify-content: space-evenly;
					width: 0;
					.order-good-name{
						display: flex;
						justify-content: flex-end;
					}
					.order-good-num{
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
		.order-operate{
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
	}
}
</style>
